<template>
  <view :class="classNames" @click="handleChange">
    <template v-if="$slots.radio">
      <slot name="radio" :checked="computedChecked"></slot>
    </template>
    <template v-else>
      <view
        v-if="mergedType === 'radio'"
        class="arco-icon-hover arco-radio-icon-hover"
      >
        <view class="arco-radio-icon"> </view>
      </view>
      <view :class="labelClass">
        <slot name="default"></slot>
      </view>
    </template>
  </view>
</template>

<script lang="ts">
import { useFormItem } from "@/ArcoUni/hook/use-form-item";
import { isUndefined } from "@/utils/is";
import { computed, defineComponent, inject, ref, toRefs } from "vue";
import context from "./content";
const Switch = defineComponent({
  name: "SwitcH",
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  props: {
    modelValue: {
      type: [String, Number, Boolean],
      default: void 0,
    },
    defaultChecked: {
      type: Boolean,
      default: false,
    },
    value: {
      type: [String, Number, Boolean],
      default: true,
    },
    type: {
      type: String,
      default: "radio",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    uninjectGroupContext: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["update:modelValue", "change"],
  setup(props, { slots, emit }) {
    const { disabled } = toRefs(props);
    const prefixCls = "arco-radio";
    const radioGroupCtx = !props.uninjectGroupContext
      ? inject(context.radioGroupKey, void 0)
      : void 0;

    // 是否单选框组
    const isGroup = computed(
      () =>
        (radioGroupCtx == null ? void 0 : radioGroupCtx.name) ===
        "ArcoRadioGroup",
    );

    const mergedType = computed(() => {
      var _a;
      return (_a = radioGroupCtx == null ? void 0 : radioGroupCtx.type) != null
        ? _a
        : props.type;
    });

    //
    const { mergedDisabled: _mergedDisabled, eventHandlers } = useFormItem({
      disabled,
    });

    const _checked = ref(props.defaultChecked);

    const mergedDisabled = computed(
      () =>
        (radioGroupCtx == null ? void 0 : radioGroupCtx.disabled) ||
        _mergedDisabled.value,
    );
    const computedChecked = computed(() => {
      var _a, _b;
      if (isGroup.value) {
        return (
          (radioGroupCtx == null ? void 0 : radioGroupCtx.value) ===
          ((_a = props.value) != null ? _a : true)
        );
      }
      if (!isUndefined(props.modelValue)) {
        return props.modelValue === ((_b = props.value) != null ? _b : true);
      }
      return _checked.value;
    });

    const handleChange = (e) => {
      var _a, _b, _c, _d, _e;
      _checked.value = true;

      if (mergedDisabled.value) {
        return;
      }
      if (isGroup.value) {
        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
        radioGroupCtx == null
          ? void 0
          : radioGroupCtx.handleChange(
              (_a = props.value) != null ? _a : true,
              e,
            );
      } else {
        emit("update:modelValue", (_b = props.value) != null ? _b : true);
        emit("change", (_c = props.value) != null ? _c : true, e);
        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
        (_e = (_d = eventHandlers.value) == null ? void 0 : _d.onChange) == null
          ? void 0
          : _e.call(_d, e);
      }
    };

    const isaction = computed(() => {
      return Boolean(slots.action);
    });

    const classNames = computed(() => {
      return [
        `${mergedType.value === "button" ? `${prefixCls}-button` : prefixCls}`,
        {
          [`${prefixCls}-checked`]: computedChecked.value,
          [`${prefixCls}-disabled`]: mergedDisabled.value,
        },
      ];
    });

    const labelClass = computed(() => {
      return [
        `${mergedType.value === "button" ? `${prefixCls}-button-content` : `${prefixCls}-label`} `,
      ];
    });

    return {
      prefixCls,
      classNames,
      mergedType,
      labelClass,
      isaction,
      mergedDisabled,
      computedChecked,
      handleChange,
    };
  },
});
export default Switch;
</script>
